<div class="content-form">
    <h2><?php echo $this->titulo; ?></h2>
    
    <div style="margin: 10px 50px;">
        <?php if($this->per_add){?>
        <span class="btn btn-success fileinput-button">
            <i class="icon-plus icon-white"></i>
            <span>Selecione as Imagens</span>
            <input id="fileupload" type="file" name="files[]" multiple>
        </span>
        <?php } ?>
        <br>
        <br>
        <div id="progress" class="progress">
            <div class="progress-bar progress-bar-success"></div>
        </div>
        <?php // <div id="files" class="files"></div> ?>
    </div>
    
    <?php if($this->link > ''){ ?>    
    <a href="<?php echo $this->link; ?>">Voltar</a>    
    <br><br>
    <?php } ?>   
    
    <div id="container" class="cnt_list_gl" style="width:850px; min-height: 600px;">
    
    <?php 
        $item = 0;
        $arr_img = array();
        foreach ($this->result as $row) {
                 $item++;
                //$src = $row['GAL_NOM'];
                
                if($row['GAL_MODNUM'] > 0) {
                    $id = $row['GAL_IDIMG'];
                    $temp = explode('.', $id);
                    $id = $temp[0];   
                }
                else $id = $row['GAL_ID'].'_g_tb';
                $arr_img[$id] = $id;
                
                
                $img = glob($this->dir.$id.'.*');
                foreach ($img as $src) $id = $src;
                
                $nome = end(explode('/', $src));
                $nome = explode('.', $nome);
                $id = $nome[0];
                
                $tam_img = getimagesize($src);
                if($tam_img[0] == '200' && $tam_img[1] == '200') $val_radio = '1';
                else if($tam_img[0] == '200' && $tam_img[1] == '400') $val_radio = '2';
                else if($tam_img[0] == '400' && $tam_img[1] == '200') $val_radio = '3';
                else if($tam_img[0] == '400' && $tam_img[1] == '400') $val_radio = '4';
                
                $style = 'style="width: '.$tam_img[0].'px;height: '.$tam_img[1].'px"';
                ?>
                <div id="cnt_gl_<?php echo $id; ?>" class="cnt_gl item <?php echo $item;?>" <?php echo $style;?>>
                    <div class="cnt_btn">
                        <ul class="ui-widget ui-helper-clearfix">
                            <?php /*
                            <li title="Tamanhos" class="cnt-tam">
                                <label><input type="radio" class="tam_gal" name="tam_gal<?php echo $id; ?>" id_cod="<?php echo $row['GAL_ID'].'_g'; ?>" value="1" <?php if($val_radio == '1') echo 'checked=""'; ?>  /><img src="<?php echo $this->urlbase.'/public/media/images/sys/1_4.png'?>" /></label>
                                <label><input type="radio" class="tam_gal" name="tam_gal<?php echo $id; ?>" id_cod="<?php echo $row['GAL_ID'].'_g'; ?>" value="2" <?php if($val_radio == '2') echo 'checked=""'; ?> /><img src="<?php echo $this->urlbase.'/public/media/images/sys/1_2_V.png'?>" /></label>
                                <label><input type="radio" class="tam_gal" name="tam_gal<?php echo $id; ?>" id_cod="<?php echo $row['GAL_ID'].'_g'; ?>" value="3" <?php if($val_radio == '3') echo 'checked=""'; ?> /><img src="<?php echo $this->urlbase.'/public/media/images/sys/1_2_H.png'?>" /></label>
                                <label><input type="radio" class="tam_gal" name="tam_gal<?php echo $id; ?>" id_cod="<?php echo $row['GAL_ID'].'_g'; ?>" value="4" <?php if($val_radio == '4') echo 'checked=""'; ?> /><img src="<?php echo $this->urlbase.'/public/media/images/sys/1_inteiro.png'?>" /></label>
                            </li>
                             */ ?>
                            <li title="Ordem" class="ui-state-highlight ui-corner-all ord_foto" id="<?php echo $id; ?>"><input type="text" class="ord_gal" size="3" maxlength="3" id="<?php echo $id; ?>" value="<?php echo $row['GAL_ORD']?>" /></li>
                            <li title="Excluir" class="ui-state-error ui-corner-all del_foto" id="<?php echo $id;//$row['GAL_ID'].'_g'; ?>" src="<?php echo $this->urlbase.'/'.$src; ?>"><span class="ui-icon ui-icon-closethick"></span></li>
                        </ul>
                    </div>
                <?php echo '<a href="'.$this->urlbase.'/'.str_replace('_tb.', '.',$src).'" data-lightbox="roadtrip" /><img title="" src="'.$this->urlbase.'/'.$src.'?1='.  rand(99, 9999).'" /></a>'; ?>
                </div>
                <?php
        }
        
        //foreach ($this->result as $row) {
            $imgs = glob($this->dir.$this->ctl_id.'_g_*_tb.*'); // 1_g_1_tb
            asort($imgs);
            foreach ($imgs as $key => $src) {
                $item++;
                
                $tam_img = getimagesize($src);
                if($tam_img[0] == '200' && $tam_img[1] == '200') $val_radio = '1';
                else if($tam_img[0] == '200' && $tam_img[1] == '400') $val_radio = '2';
                else if($tam_img[0] == '400' && $tam_img[1] == '200') $val_radio = '3';
                else if($tam_img[0] == '400' && $tam_img[1] == '400') $val_radio = '4';
                
                $style = 'style="width: '.$tam_img[0].'px;height: '.$tam_img[1].'px"';
                
                $nome = end(explode('/', $src));
                $nome = explode('.', $nome);
                $id = $nome[0];//str_replace('_tb', '_g',$nome[0]);
                
                if(!isset($arr_img[$id])){
                ?>
                <div id="cnt_gl_<?php echo $id; ?>" class="cnt_gl item <?php echo $item;?>" <?php echo $style;?>>
                    <div class="cnt_btn">
                        <ul class="ui-widget ui-helper-clearfix">
                            <?php /*
                            <li title="Tamanhos" class="cnt-tam">
                                <label><input type="radio" class="tam_gal" name="tam_gal<?php echo $id; ?>" id_cod="<?php echo $id; ?>" value="1" <?php if($val_radio == '1') echo 'checked=""'; ?>  /><img src="<?php echo $this->urlbase.'/public/media/images/sys/1_4.png'?>" /></label>
                                <label><input type="radio" class="tam_gal" name="tam_gal<?php echo $id; ?>" id_cod="<?php echo $id; ?>" value="2" <?php if($val_radio == '2') echo 'checked=""'; ?> /><img src="<?php echo $this->urlbase.'/public/media/images/sys/1_2_V.png'?>" /></label>
                                <label><input type="radio" class="tam_gal" name="tam_gal<?php echo $id; ?>" id_cod="<?php echo $id; ?>" value="3" <?php if($val_radio == '3') echo 'checked=""'; ?> /><img src="<?php echo $this->urlbase.'/public/media/images/sys/1_2_H.png'?>" /></label>
                                <label><input type="radio" class="tam_gal" name="tam_gal<?php echo $id; ?>" id_cod="<?php echo $id; ?>" value="4" <?php if($val_radio == '4') echo 'checked=""'; ?> /><img src="<?php echo $this->urlbase.'/public/media/images/sys/1_inteiro.png'?>" /></label>
                            </li>
                            */ ?>
                            <li title="Ordem" class="ui-state-highlight ui-corner-all ord_foto" id="<?php echo $id; ?>"><input type="text" class="ord_gal" size="3" maxlength="3" value="" /></li>
                            <li title="Excluir" class="ui-state-error ui-corner-all del_foto" id="<?php echo $id; ?>" src="<?php echo $this->urlbase.'/'.$src; ?>" ><span class="ui-icon ui-icon-closethick"></span></li>
                        </ul>
                    </div>
                <?php echo '<a href="'.$this->urlbase.'/'.str_replace('_tb.', '.',$src).'" data-lightbox="roadtrip" /><img title="" src="'.$this->urlbase.'/'.$src.'?1='.  rand(99, 9999).'" /></a>'; ?>
                </div>
                <?php
                }
            }
        //} 
    ?>
    </div>
    
    
</div>

<style>
label {
    display: inline-block;
    margin:0;
    font-weight: normal;
    vertical-align: bottom;
    font-size: 11px;    
    width: 25px;
    text-align: center;
}
label img{
    vertical-align: middle;
}
.cnt-tam{
    padding: 0 5px !important;
}
</style>

<script src="<?php echo $this->urlbase.'/public/media/js/masonry.pkgd.min.js'?>"></script>
<script> 
$(function(){

    //var container = document.querySelector('#container');
    //var msnry = new Masonry( container, {
    $('#container').masonry({
      itemSelector: '.item',
      columnWidth: 1
    });
    
    
}); 
</script>


<link  href="<?php echo $this->urlbase.'/public/media/js/lightbox/css/lightbox.css' ?>" rel="stylesheet" media="screen"/>
<script src="<?php echo $this->urlbase.'/public/media/js/lightbox/js/modernizr.custom.js' ?>"></script>
<script src="<?php echo $this->urlbase.'/public/media/js/lightbox/js/lightbox-2.6.min.js' ?>"></script>

<link rel="stylesheet" href="<?php echo $this->urlbase.'/public/media/js/multiupload/css/bootstrap.min.css'; ?>">
<link rel="stylesheet" href="<?php echo $this->urlbase.'/public/media/js/multiupload/css/font-awesome.css'; ?>">
<link rel="stylesheet" href="<?php echo $this->urlbase.'/public/media/js/multiupload/css/jquery.fileupload-ui.css'; ?>" />

<script src="<?php echo $this->urlbase.'/public/media/js/multiupload/'; ?>js/vendor/jquery.ui.widget.js"></script>
<script src="<?php echo $this->urlbase.'/public/media/js/multiupload/'; ?>js/jquery.iframe-transport.js"></script>
<script src="<?php echo $this->urlbase.'/public/media/js/multiupload/'; ?>js/jquery.fileupload.js"></script>
<script>
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = '<?php echo $this->urlbase.'/public/media/js/multiupload/server/php/'; ?>';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
            if(progress == 100){
                setTimeout(function(){ $.post(URLBASE+'/galeria/reordenacao',{ }, function(data){ }, 'json'); window.location.reload(); },5000);
            }
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>